<template>
    <div>
        <button @click="add(5)">+</button>
        <h1>我是Hello子组件{{count}}</h1>
        <button @click="sub()">-</button>
        <hr>
        <h1>{{this.$store.state.counter}}</h1>
        <ul>
            <li v-for="item in student">{{item}}</li>
        </ul>
        <hr>
        <button @click="change()">修改信息</button>
        <ul>
            <li v-for="(item,index) in info">{{index}}-----{{item}}</li>
        </ul>
    </div>
</template>

<script>
  export default {
    name: "Hello",
    props:{
      counter:Number
    },
    computed:{
      count(){
        return this.$store.state.counter
      },
      student(){
        return this.$store.state.student
      },
      info(){
        return this.$store.state.info
      }
    },
    methods:{
      add(num){
        this.$store.commit('inc',num)
      },
      sub(){
        this.$store.commit('dec')
      },
      change(){
        this.$store.commit('change')
      },
      getMsgFormSon(data){
        console.log(data)
      }
    }
  }
</script>

<style scoped>

</style>
